<html>
	<head>
	<title>
		View All Photos
	</title>
	<link href="css/bootstrap.css" rel="stylesheet"> 
	<style>
		body {
			padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
		}
	</style> 
	<link href="css/bootstrap-responsive.css" rel="stylesheet"> 
	<link href="css/smoothness/jquery-ui-1.9.1.custom.css" rel="stylesheet">
	<link href="css/cameraRoll.css" rel="stylesheet">
	
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.9.1.custom.js"></script>
	<script type="text/javascript" src="js/buildTableTest.js"></script>
	<script>

		<?php
			echo "var userName = '".$_SESSION['userName']."';";
		?>

		$(document	).ready(function() {
			$.getJSON("cameraRollPhp/viewAllPhotos.php", function(data){
				console.log(data.images);
//				$.testTable.buildTable(data, userName);
//				imagesResponse = data;
			});
		});
</script>

	<body>

	<!--Main body-->
	<div>
		<h1 style="font-family: Comic Sans">
			View All Photos
		</h1>
	<br />
		<table id="pictureTable">
			<tr>
				<th>All pictures for 
					<?php
						//the username is set, display the username
						if(isset($_SESSION['userName'])) {
							echo $_SESSION['userName'];
						}
						//otherwise, redirect to login page
#						else {
#							header('Location:./');
#							exit;
#						}
					?>

				</th>
			</tr>'
			<tr id="picTable">
				<!--table of pictures goes here -->
			</tr>
		</table>
	</body>
</html>
